<script setup>
import { ref } from 'vue'
import {changeUserInfoService, getUserInfoService} from "@/api/user";
import { ElMessage } from 'element-plus'
let token = localStorage.getItem("token");
//?取不到用户的信息
const userInfoData = ref({
  username:'',
  email:'',
  firstname:'',
  lastname:'',
  addr1:'',
  addr2:'',
  city:'',
  state:'',
  zip:'',
  country:''
})
//?保存不住数据
const getUserInfo = async ()=>{
  console.log(token)
  let result = await getUserInfoService(token);
  console.log(result);
  if(result.status === 1){
    console.log(result.data)
    userInfoData.value = result.data;
  }else{
    alert("失败");
  }
}
getUserInfo();
const changeUserInfo = async ()=>{
  console.log(userInfoData)
  let result = await changeUserInfoService(userInfoData.value);
  if(result.status === 1){
    ElMessage.success(result.message);
  }else{
    ElMessage.error(result.messag);
  }
}
//定义表单校验规则
const rules = {
  firstname:[
    {min:1,max:20,message: 'firstname不合法',trigger: 'blur'}
  ],
  lastname:[
    {min:1,max:20,message: 'lastname不合法',trigger: 'blur'}
  ],
  email:[
    {max:11,pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: 'email格式不正确',trigger: 'blur'}
  ],
}

</script>
<template>
  <el-main>
    <div class="center-wrapper" style="margin-top: 3%">
    <el-card>
    <el-form ref="form" label-position="right" label-width="auto" style="width: 500px" :model="userInfoData" :rules="rules" size="large">
      <el-form-item style="text-align: center">
        <h3 style="text-align: center; margin: 0 auto;font-size: 20px">用 户 信 息</h3>
      </el-form-item>
      <el-form-item label="User ID" prop="username">
        <el-input v-model="userInfoData.username" readonly disabled/>
      </el-form-item>
      <el-form-item label="First name" prop="firstname">
        <el-input v-model="userInfoData.firstname"/>
      </el-form-item>
      <el-form-item label="Last name" prop="lastname">
        <el-input v-model="userInfoData.lastname"/>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="userInfoData.email"/>
      </el-form-item>
      <el-form-item style="text-align: center">
        <h3 style="text-align: center; margin: 0 auto;font-size: 20px">地 址 信 息</h3>
      </el-form-item>
      <el-form-item label="Address 1" prop="addr1">
        <el-input v-model="userInfoData.addr1"/>
      </el-form-item>
      <el-form-item label="Address 2" prop="addr2">
        <el-input v-model="userInfoData.addr2"/>
      </el-form-item>
      <el-form-item label="City" prop="city">
        <el-input v-model="userInfoData.city"/>
      </el-form-item>
      <el-form-item label="State" prop="state">
        <el-input v-model="userInfoData.state"/>
      </el-form-item>
      <el-form-item label="Zip" prop="zip">
        <el-input v-model="userInfoData.zip"/>
      </el-form-item>
      <el-form-item label="Country" prop="country">
        <el-input v-model="userInfoData.country"/>
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" style="width: 100%;font-size: 18px;border-radius: 10px" size="large" @click="changeUserInfo">保存修改</el-button>
      </el-form-item>
    </el-form>
    </el-card>
      </div>
  </el-main>
</template>
<style>
.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>